<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .container {
            width: 244px;
            /* width: 260px; */
            height: 320px;
            margin: 100px auto;
            border: 1px solid lightpink;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
            padding: 5px;
        }

        .box {
            float: left;
            width: 182px;
            height: 150px;
        }

        li>img {
            border-radius: 5px;
        }

        .box img {
            position: absolute;
            padding: 15px 0 0 15px;
            display: none;
        }

        .box .current {
            display: block;
        }
    </style>
</head>

<body>
    <ul class="container">
        <section class="box">
            <img src="img/big_1.jpg" alt="" class="current">
            <img src="img/big_2.jpg" alt="">
            <img src="img/big_3.jpg" alt="">
            <img src="img/big_4.jpg" alt="">
            <img src="img/big_5.jpg" alt="">
            <img src="img/big_6.jpg" alt="">
            <img src="img/big_7.jpg" alt="">
            <img src="img/big_8.jpg" alt="">
            <img src="img/big_9.jpg" alt="">
            <img src="img/big_10.jpg" alt="">
            <img src="img/big_11.jpg" alt="">
        </section>
        <li><img src="img/small_1.jpg" alt=""></li>
        <li><img src="img/small_2.jpg" alt=""></li>
        <li><img src="img/small_3.jpg" alt=""></li>
        <li><img src="img/small_4.jpg" alt=""></li>
        <li><img src="img/small_5.jpg" alt=""></li>
        <li><img src="img/small_6.jpg" alt=""></li>
        <li><img src="img/small_7.jpg" alt=""></li>
        <li><img src="img/small_8.jpg" alt=""></li>
        <li><img src="img/small_9.jpg" alt=""></li>
        <li><img src="img/small_10.jpg" alt=""></li>
        <li><img src="img/small_11.jpg" alt=""></li>
    </ul>



</body>

<script>
    var img = document.querySelectorAll('.box img');
    var imgLis = document.querySelectorAll('li');
    for (var i = 0; i < imgLis.length; i++) {
        imgLis[i].index = i;
        imgLis[i].onmouseover = function () {
            for (var i = 0; i < imgLis.length; i++) {
                img[i].className = '';
            }
            img[this.index].className = 'current';
        }
    }

</script>

</html>